<template>
  <section class="allsongs">
            <p class="songs-subtit">
                <svg-icon class="icon" iconName="player"/>
                <span>顺序播放全部 ({{songsData.length}})</span>
            </p>
            <ul class="songs-list" v-loading="loading">
                <li class="songs-item" v-for="(item, index) in songsData" :key="index" @click="addSong(item)">
                    <p class="order">{{index+1}}</p>
                    <div class="content">
                        <h4 class="name">{{item.name}}</h4>
                        <p class="desc">
                            <span v-for="(aItem, i) in item.ar" :key="aItem.id">
                                {{aItem.name}} &nbsp;
                            </span>
                        </p>
                    </div>
                </li>
            </ul>
        </section>
</template>

<script setup>
import {computed} from 'vue'
import { useStore } from "vuex"
import s from '@/assets/bg.png'
let {songsData} = defineProps(["songsData"])
let loading = computed(()=>songsData.length <= 0)
let store = useStore()
let addSong=(item)=>{
    store.dispatch("addOneSong2",{id:item.id,name:item.name,song:item,picUrl:s})
}
</script>

<style lang="less" scoped>
 .allsongs{
        margin: 10px;
        .songs-subtit{
            margin-bottom: 10px;
            line-height: 30px;
            font-size: @font-size-medium;
            color: @light-color;
            .icon{
                width: 26px;
                height: 26px;
                vertical-align: middle;
            }
            span{
                vertical-align: middle;
                margin-left: 4px;
            }
        }
        .songs-item{
            display: flex;
            align-items: center;
            box-sizing: border-box;
            height: 64px;
            .order{
                width: 30px;
                height: 30px;
                font-size: @font-size-large;
                color: @dark-color-m;
            }
            
            h4.name{
                font-size: @font-size-medium;
                color: @light-color-m;
                margin-bottom: 6px;
            }
            p.desc{
                font-size: @font-size-small;
                color: @dark-color;
            }
        }
    }
</style>